<template>
  <div>
    <div
      id="root"
      ref="root"
    />
    <button @click="add" id="btn"></button>
  </div>
</template>

<script setup>

import { onMounted, ref } from 'vue'
import * as echarts from 'echarts'

let chartDom

let myChart

const props = defineProps({
  option: {
    type: Object,
    required: true
  }
})

const emit = defineEmits(['showTheInfo'])

const add = () => {
  console.log(props.option.series[0].data)
  emit('showTheInfo', 123)
}

const root = ref(null)

const refresh = () => {
  myChart.setOption(props.option)
}

onMounted(() => {
  setTimeout(() => {
    chartDom = root.value
    // console.log(chartDom) // 获取dom都要从ref才好
    myChart = echarts.init(chartDom)
    props.option && myChart.setOption(props.option)
    clearInterval(this)
  }, 200)
})

defineExpose({
  refresh
})

</script>

<style scoped>

#root {
  width:100%;
  height:100%;
}
#btn {
  width:20px;
  height:10px;
}

</style>
